<template>
  <view class="mine-container" :style="{ height: `${windowHeight}px` }">
    <!--顶部个人信息栏-->
    <view class="header-section">
      <view class="user-info-box">
        <view class="flex padding justify-between">
          <view v-if="!avatar" class="cu-avatar">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image
            v-if="avatar"
            @click="handleToAvatar"
            :src="avatar"
            class="cu-avatar"
            mode="widthFix"></image>
          <view v-if="!name" @click="handleToLogin" class="login-tip">
            点击登录
          </view>
          <view v-if="name" @click="handleToInfo" class="user-info">
            <view class="row">
              <view class="u_title"> 用户名：{{ name }} </view>

              <view @click="handleToInfo" class="flex align-center">
                <view class="iconfont icon-right"></view>
              </view>
            </view>

            <scroll-view
              class="tag-box"
              scroll-x="true"
              @scroll="scroll"
              :scroll-left="old.scrollLeft">
              <view
                class="tag-item"
                v-for="(tag, index) in tagArr"
                :key="index"
                >{{ tag.label }}</view
              >
            </scroll-view>

            <view class="level-box">
              <view class="level-tag"
                ><view class="iconfont icon-vip text-yellow"></view>Lv3</view
              >
              <view class="curr">{{ currLevel }}</view>
              <view class="next">/{{ nextLevel }}</view>
            </view>
          </view>
        </view>

        <view class="line"></view>

        <view class="lineup-box">
          <view class="title">小队阵容</view>

          <scroll-view
            class="slide-box"
            scroll-x="true"
            @scroll="scroll"
            :scroll-left="old.scrollLeft">
            <view
              class="slide-item"
              v-for="(lineup, index) in lineupArr"
              :key="index">
              <image :src="lineup.avatar" class="avatar"></image>
              <view class="icon-font icon-up"></view>
            </view>
          </scroll-view>

          <view class="subTitle">阵容加成</view>

          <view class="lineup-ul">
            <view
              class="lineup-li"
              v-for="(lineup, index) in lineupArr"
              :key="index"
              ><view class="circle"></view>{{ lineup.tips }}</view
            >
          </view>
        </view>
      </view>
    </view>

    <view class="content-section">
      <view class="order-box">
        <view class="title">我的订单</view>

        <scroll-view class="order-ul" scroll-x="true">
          <view
            class="order-li"
            v-for="(order, index) in orderArr"
            :key="index">
            <uni-badge :text="order.count" absolute="rightTop">
              <image :src="order.avatar" class="avatar"></image>
              <view class="text">{{ order.text }}</view>
            </uni-badge>
          </view>
        </scroll-view>
      </view>

      <view class="fav-box">
        <view class="title">收藏/关注</view>

        <view class="fav-ul">
          <view
            class="fav-li"
            v-for="(fav, index) in favArr"
            :key="index"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // name: this.$store.state.user.name,
      name: '默认用户名',
      old: {
        scrollLeft: 0,
      },
      tagArr: [
        {
          label: '联盟职称',
          value: 1,
        },
        {
          label: '大收藏家',
          value: 2,
        },
        {
          label: '探店达人',
          value: 3,
        },
        {
          label: '搜遍天下',
          value: 4,
        },
        {
          label: '不知道了',
          value: 5,
        },
        {
          label: '联盟职称',
          value: 6,
        },
        {
          label: '联盟职称',
          value: 7,
        },
        {
          label: '联盟职称',
          value: 8,
        },
        {
          label: '联盟职称',
          value: 9,
        },
        {
          label: '联盟职称',
          value: 10,
        },
        {
          label: '联盟职称',
          value: 11,
        },
        {
          label: '联盟职称',
          value: 12,
        },
      ],
      currLevel: 23,
      nextLevel: 100,
      lineupArr: [
        {
          avatar: '../static/images/lineupSlide.png',
          tips: '前排输出+10%',
        },
        {
          avatar: '../static/images/lineupSlide.png',
          tips: '后排输出+8%',
        },
        {
          avatar: '../static/images/lineupSlide.png',
          tips: '全队防御+5%',
        },
        {
          avatar: '../static/images/lineupSlide.png',
          tips: '前排输出+10%',
        },
        {
          avatar: '../static/images/lineupSlide.png',
          tips: '后排输出+8%',
        },
        {
          avatar: '../static/images/lineupSlide.png',
          tips: '全队防御+5%',
        },
      ],
      orderArr: [
        {
          avatar: '../static/images/orderDefault.png',
          count: 2,
          text: '待付款',
        },
        {
          avatar: '../static/images/orderDefault.png',
          count: 1,
          text: '待发货',
        },
        {
          avatar: '../static/images/orderDefault.png',
          count: 0,
          text: '待收货',
        },
        {
          avatar: '../static/images/orderDefault.png',
          count: 1,
          text: '试用中',
        },
        {
          avatar: '../static/images/orderDefault.png',
          count: 0,
          text: '已逾期',
        },
        {
          avatar: '../static/images/orderDefault.png',
          count: 1,
          text: '待评价',
        },
        {
          avatar: '../static/images/orderDefault.png',
          count: 0,
          text: '退款/售后',
        },
      ],
    };
  },
  computed: {
    avatar() {
      return this.$store.state.user.avatar;
    },
    windowHeight() {
      return uni.getSystemInfoSync().windowHeight - 50;
    },
  },
  methods: {
    handleToInfo() {
      this.$tab.navigateTo('/pages/mine/info/index');
    },
    handleToEditInfo() {
      this.$tab.navigateTo('/pages/mine/info/edit');
    },
    handleToSetting() {
      this.$tab.navigateTo('/pages/mine/setting/index');
    },
    handleToLogin() {
      this.$tab.reLaunch('/pages/login');
    },
    handleToAvatar() {
      this.$tab.navigateTo('/pages/mine/avatar/index');
    },
    scroll: function (e) {
      console.log(e);
      this.old.scrollLeft = e.detail.scrollTop;
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f5f6f7;
}

.mine-container {
  width: 100%;
  height: 100%;

  .header-section {
    padding: 32rpx 32rpx 16rpx;
    background: linear-gradient(180deg, #eaf2ff 0%, #f5f5f5 42.73%);

    .login-tip {
      font-size: 18px;
      margin-left: 10px;
    }

    .cu-avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 64rpx;
      background: rgba(234, 242, 255, 1);

      .icon {
        font-size: 40px;
      }
    }

    .user-info {
      font-size: 32rpx;
      line-height: 48rpx;
      color: rgba(0, 0, 0, 0.9);
      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .u_title {
      }
    }
  }

  .content-section {
    position: relative;
    padding: 0 32rpx;
  }
}

.user-info-box {
  border-radius: 20rpx;
  background-color: #fff;
}
.tag-box {
  width: 440rpx;
  line-height: 20px;
  margin-top: 8rpx;
  margin-bottom: 8rpx;
  overflow-x: auto;
  white-space: nowrap;
  .tag-item {
    display: inline-block;
    padding: 4rpx 16rpx;
    margin-right: 12rpx;
    background: rgba(243, 243, 243, 0.8);
    border-radius: 48rpx;
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.7);
  }
}

.level-box {
  display: flex;
  align-items: center;
  .level-tag {
    width: 140rpx;
    height: 40rpx;
    text-align: center;
    border: 1px solid rgba(255, 215, 0, 0.8);
    border-radius: 48rpx;
    font-size: 24rpx;
    line-height: 40rpx;
    color: rgba(0, 0, 0, 0.5);
    margin-right: 16rpx;

    .iconfont {
      font-size: 28rpx;
      margin-right: 4rpx;
    }
  }
  .curr {
    font-size: 32rpx;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
  }
  .next {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.4);
    margin-left: 4rpx;
  }
}

.line {
  height: 1px;
  background-color: #efefef;
  margin: 16rpx 30rpx;
}

.lineup-box {
  padding: 20rpx;
  .title {
    font-size: 28rpx;
    font-weight: bold;
    color: rgba(47, 52, 55, 1);
    margin-bottom: 12rpx;
  }
}

.slide-box {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 12rpx;
  .slide-item {
    position: relative;
    display: inline-block;
    width: 22%;
    height: 240rpx;
    margin-right: 16rpx;
    border-radius: 32rpx;
    .avatar {
      width: 100%;
      height: 100%;
    }
    .icon-up {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 56rpx;
      height: 46rpx;
    }
  }
}

.icon-up {
  // background: url(../static/images/mine/icon-up.png) no-repeat center center;
  background-size: 100% 100%;
  box-sizing: border-box;
}

.subTitle {
  font-size: 24rpx;
  color: rgba(0, 0, 0, 0.5);
  margin-bottom: 12rpx;
}

.lineup-ul {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  .lineup-li {
    position: relative;
    width: 46%;
    padding-left: 24rpx;
    font-size: 24rpx;
    color: rgba(172, 172, 172, 1);
    margin-bottom: 8rpx;
    .circle {
      position: absolute;
      top: 8rpx;
      left: 0;
      width: 12rpx;
      height: 12rpx;
      background: rgba(234, 242, 255, 1);
      border-radius: 50%;
    }
  }
}

.order-box {
  padding: 20rpx;
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  .title {
    font-size: 28rpx;
    font-weight: bold;
    color: #2f3437;
    margin-bottom: 12rpx;
  }
  .order-ul {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding: 20rpx 0;
    margin-bottom: 12rpx;
  }

  .order-li {
    display: inline-block;
    width: 18%;
    padding: 24rpx 0 0;
    text-align: center;
    .icon-font {
      font-size: 48rpx;
      color: rgba(0, 0, 0, 0.8);
      margin-bottom: 8rpx;
    }
    .avatar {
      width: 64rpx;
      height: 64rpx;
      border-radius: 32rpx;
      margin-bottom: 8rpx;
    }
    .text {
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.6);
    }
  }
}

.fav-box {
  padding: 20rpx;
  margin-top: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  .title {
    font-size: 28rpx;
    font-weight: bold;
    color: #2f3437;
    margin-bottom: 12rpx;
  }
}
</style>
